<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      // 创建React元素
      // 使用 JSX 语法来创建 React 元素
      // 1. 基本使用
      // const element = (
      //   <h1 id="title" className="title" title="这是一个标题">
      //     Hello React!
      //   </h1>
      // );

      // 2. 复杂使用
      // const element = (
      //   <ul>
      //     <li>
      //       <a href="https://www.atguigu.com">尚硅谷</a>
      //     </li>
      //     <li>
      //       <a href="https://www.atguigu.com">尚硅谷</a>
      //     </li>
      //     <li>
      //       <a href="https://www.atguigu.com">尚硅谷</a>
      //     </li>
      //   </ul>
      // );

      // 3. 渲染 js 数据
      // const link = "https://www.atguigu.com";
      // const linkText = "尚硅谷~~~";

      // // JSX 语法中使用 {} 来渲染 js 数据
      // const element = (
      //   <ul>
      //     <li>
      //       <a href={link}>
      //         {linkText}
      //       </a>
      //     </li>
      //   </ul>
      // );

      // 4. JSX语法注意事项: 1. 必须有一个根标签（创建的React元素，必须被一个标签包裹） 2. 标签必须有结束符
      // JSX 语法中使用 {} 来渲染 js 数据
      const element = (
        <div>
          <button>按钮1</button>
          <button>按钮2</button>
          <button>按钮3</button>
          <input type="text" />
        </div>
      );
      // 渲染React元素
      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
